<template>
  <div class="app-container">
    <div class="filter-item-title">反馈详情</div>
    <div class="filter-item-content">
      <div class="content-line">
        <div>
          <span>反馈人来源</span><span>{{ detail.feedbackOrigin == "1" ? "攸诺城配" : "攸诺运管" }}</span>
        </div>
        <div>
          <span>联系方式</span><span>{{ detail.phoneNo }}</span>
        </div>
        <div>
          <span>反馈类型</span><span>{{ detail.feedbackTypeName }}</span>
        </div>
        <div>
          <span>反馈时间</span><span>{{ detail.createTime }}</span>
        </div>
      </div>
      <div class="content-block">
        <div>
          <span>问题描述</span><span>{{ detail.description }}</span>
        </div>
        <div>
          <span>图片/视频</span>
          <span>
            <span v-for="item in detail.attachmentList" :key="item.attachmentUrl">
              <el-image
                v-if="item.attachmentType == '1'"
                :src="item.attachmentUrl"
                style="width: 100px; margin-right: 10px; vertical-align: middle"
              />
              <video
                v-if="item.attachmentType == '2'"
                width="200px"
                height="100px"
                style="margin-right: 10px; vertical-align: middle"
                controls
              >
                <source :src="item.attachmentUrl" type="video/mp4" />
                ningalabox浏览器不支持播放视频，请使用Chrome或Firefox浏览器
              </video>
            </span>
            <!-- <img
              v-for="item in 4"
              :key="item"
              src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"
              style="width: 100px; margin-right: 10px; vertical-align: middle"
              alt=""
            /> -->
          </span>
        </div>
        <div>
          <span>状态</span><span>{{ detail.status == "1" ? "未回复" : "已回复" }}</span>
        </div>
        <div>
          <span>回复内容</span><span>{{ detail.replyContent }}</span>
        </div>
      </div>
    </div>
    <div class="filter-item-input">
      <div class="input-textarea">
        <el-input type="textarea" v-model="replyContent" placeholder="请输入回复内容"></el-input>
      </div>
      <div class="input-btn">
        <p><el-button type="primary" size="small" @click="PhoneFeedbackReply">电话回复</el-button></p>
        <p><el-button type="primary" size="small" @click="ContentFeedbackReply">确定回复</el-button></p>
      </div>
    </div>
  </div>
</template>

<script lang="tsx" name="proOpinionDetail" setup>
import { Base } from "@/api/interface/province/base";
import { feedbackReplyAPI, getFeedbackDetailAPI } from "@/api/modules/province/baseAPI";
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const detail = ref<Base.DataDetail>({
  description: "string",
  annex1: "string",
  status: "st",
  remark: "string",
  annex2: "string",
  annex3: "string",
  annex4: "string",
  id: 1,
  feedbackOrigin: "string",
  feedbackType: "string",
  phoneNo: "string",
  replyWay: "string",
  replyContent: "string",
  replyTime: "2019-08-24T14:15:22.123Z",
  createBy: "string",
  createTime: "2019-08-24T14:15:22.123Z",
  updateBy: "string",
  updateTime: "2019-08-24T14:15:22.123Z",
  custId: -2147483648
});
const replyContent = ref<string>("");
const replyWay = ref<string>("");
const PhoneFeedbackReply = () => {
  replyWay.value = "1";
  feedbackReply();
};
const ContentFeedbackReply = () => {
  replyWay.value = "2";
  feedbackReply();
};
const getFeedbackDetail = async (ID: string) => {
  const { code, data, msg } = await getFeedbackDetailAPI(ID);
  if (code == "200" && data) {
    detail.value = data;
  } else {
    ElMessage.error(msg);
  }
};
const feedbackReply = async () => {
  const { code, msg } = await feedbackReplyAPI({
    id: String(route.query.id),
    replyContent: replyContent.value,
    replyWay: replyWay.value
  });
  if (code == "200") {
    ElMessage.success("回复成功");
    getFeedbackDetail(String(route.query.id));
  } else {
    ElMessage.error(msg);
  }
};
onMounted(() => {
  getFeedbackDetail(String(route.query.id));
});
</script>

<style lang="scss" scoped>
.app-container {
  padding: 15px;
  background-color: #ffffff;
}
.filter-item-title {
  font-size: 13px;
  color: black;
}
.filter-item-content {
  padding: 15px;
  margin-top: 15px;
  border: 1px solid #e8e8e8;
  .content-line {
    width: 100%;
    div {
      display: inline-block;
      width: 50%;
      padding: 15px 0;
      span:nth-child(1) {
        font-size: 13px;
        color: gray;
      }
      span:nth-child(2) {
        margin-left: 10px;
        font-size: 13px;
        color: black;
      }
    }
  }
  .content-block {
    div {
      padding: 15px 0;
      span:nth-child(1) {
        font-size: 13px;
        color: gray;
      }
      span:nth-child(2) {
        margin-left: 10px;
        font-size: 13px;
        color: black;
      }
    }
  }
}
.filter-item-input {
  margin-top: 15px;
  .input-textarea {
    display: inline-block;
    width: 85%;
    height: 100px;
    vertical-align: middle;
    border: 1px solid #e8e8e8;
    div {
      height: 100%;
      ::v-deep .el-textarea__inner {
        height: 100%;
      }
    }
  }
  .input-btn {
    display: inline-block;
    width: 10%;
    vertical-align: middle;
    p {
      text-align: right;
    }
  }
}
</style>
